<script lang="ts" setup>
import { ref, onMounted, computed, watchEffect } from "vue"
import type { FormInstance } from 'element-plus'
import { useRouter } from 'vue-router';
import setPublicCode from "#/utils/setPublicKey"
import { idCardRegex } from "#/utils/constants"
import { $t } from '@vben/locales';


defineOptions({ name: 'Login' });

const router = useRouter();
const formRef = ref<FormInstance>()
const ruleForm = ref({
  name: "",
  idCard: '',
  certificateNumber: ""
})


watchEffect(() => { })

const rules = {
  name: [
    { required: true, message: $t('common.inputPhTxt', [$t('common.nameTxt')]), trigger: 'blur' },
  ],
  idCard: [
    { required: true, pattern: idCardRegex, message: $t('common.idCardPhTxt'), trigger: 'blur' },
  ],
  certificateNumber: [
    { required: true, message: $t('common.inputPhTxt', [$t('certVerify.certificateNumber')]), trigger: 'blur' },
  ]
}

// 登录成功后需要判断用户身份，是跳转到客户端还是服务端
const sumbit = () => {
  if (!formRef) return
  formRef.value?.validate((valid) => {
    if (valid) {
      //@ts-ignore
      router.push({ path: '/lesson/certResult', query: { ...ruleForm.value, idCard: setPublicCode(ruleForm.value.idCard) } })
    }
  })
}

onMounted(() => {
  formRef.value?.resetFields()
})


</script>
<template>
  <!-- 登录 -->
  <div class="login flex flex-col items-center overflow-auto pl-[60px] pr-[60px] pb-[60px] ">
    <div class="pb-[40px] font-semibold text-[26px] pt-[60px]">{{ $t('certVerify.title') }}</div>
    <el-form ref="formRef" class="w-[100%]" :model="ruleForm" :rules="rules" label-position="left">
      <el-form-item label="" prop="name">
        <el-input v-model="ruleForm.name" size="large" maxlength="100"
          :placeholder="$t('common.inputPhTxt', [$t('common.nameTxt')])" />
      </el-form-item>
      <el-form-item label="" prop="idCard">
        <el-input v-model="ruleForm.idCard" size="large" maxlength="18"
          :placeholder="$t('common.inputPhTxt', [$t('common.idCardTxt')])" />
      </el-form-item>
      <el-form-item label="" prop="certificateNumber">
        <el-input v-model="ruleForm.certificateNumber" size="large" maxlength="255"
          :placeholder="$t('common.inputPhTxt', [$t('certVerify.certificateNumber')])" />
      </el-form-item>
    </el-form>
    <div class="sumbit pt-[35px] pb-[20px] w-[100%]">
      <el-button type="primary" size="large" class="w-[100%]" @click="sumbit">
        {{ $t('certVerify.searchButton') }}
      </el-button>
    </div>
  </div>
</template>
<style lang="less" scoped></style>
